import React from  'react'
import { Table,Modal,message,Button,Card,Form ,Input } from 'antd'
import axios from "../../../axios/axios";
import BaseFilterForm from './../../../components/BaseFilterForm'

import './../../../style/common.less'

export default class Menu extends React.Component{

    state={
        dataSource:[]
    }

    params = {
        page:1,
        limit:5
    }

    formList = [
        {
            type:'INPUT',
            label:'菜单名称',
            field:'name',
            placeholder:'模糊查询菜单名'
        }
    ]
    componentWillMount(){
        this.filterSubmit()
    }

    handleOperator = (type)=> {
        let rows = this.state.selectedRows
        if(type ==='create'){
            this.setState({
                title:'创建菜单',
                isVisible:true,
                type
            })
        }else if(type==="edit" || type==='detail'){
            if (!rows || rows.length>1){
                Modal.warn({
                    title:'警告',
                    content:'只能选中一行进行编辑!'
                })
                return
            }
            this.setState({
                title:type==='edit'?'编辑用户':'查看详情',
                isVisible:true,
                menuInfo:rows[0],
                type
            })

        }else if(type ==='delete'){
            // 先进行过滤
            if ( !rows || rows.length ===0){
                Modal.warn({
                    title:'警告',
                    content:'需要至少先选中一行!'
                })
                return
            }
            // 获取ids
            let idList = []
            let roleNameList=[]
            rows.map((item) => {
                idList.push(item.id)
                roleNameList.push(item.name)
                return item
            })
            let ids=idList.join(",")
            // 进行删除
            Modal.confirm({
                title:`确定要删除:${roleNameList.join(',')}角色`,
                okText:'确定',
                onOk:() => {
                    axios.ajax({
                        url:'/cloud-long-upms/sysMenu/deleteBatch',
                        method:'delete',
                        data:{
                            params:{
                                ids:ids
                            }
                        }
                    }).then((res)=>{
                        if (res.status===200) {
                            this.setState({
                                isVisible:false
                            })
                            message.info(`${res.message}`)
                            this.requestList()
                        }
                    })
                },
                onCancel:() => {
                    message.info("取消批量删除!")
                },
                cancelText:'取消'
            })
        }
    }

    handleSubmit =()=>{
        let type = this.state.type
        let data =  this.menuForm.props.form.getFieldsValue()
        if (type === 'edit'){
            data.id = this.state.selectedRows[0].id
        }
        axios.ajax({
            url:type === 'create'? '/cloud-long-upms/sysMenu/add':'/cloud-long-upms/sysMenu/update',
            method:type === 'create'? 'post':'put',
            data:{
                params:{
                    ...data
                }
            }
        }).then((res)=>{
            if(res.status ===200){
                this.setState({
                    isVisible:false
                })
                message.info(type === 'create'? '添加一笔数据成功!':'一笔数据修改完成!')
                this.requestList();
                this.menuForm.props.form.resetFields()
            }
        })
    }

    //查询提交
    filterSubmit = (fieldsValue)=>{
        this.params =Object.assign(this.params, fieldsValue)
        this.requestList()

    }

    requestList = () => {
        axios.requestList(this,'/cloud-long-upms/sysMenu/page','get',this.params)
    }

    render(){
        const selectedRowKeys = this.state.selectedRowKeys
        const rowCheckSelection = {
            type: 'checkbox',
            selectedRowKeys,
            // 单选框也可以用onChange onRow 适合单选
            onChange:(selectedRowKeys,selectedRows)=>{
                this.setState({
                    selectedRowKeys,
                    selectedRows
                })
            }
        }
        const columns=[
            {
                title:'id',
                dataIndex:'id'
            },
            {
                title: '菜单',
                dataIndex: 'name'
            },
            {
                title: '类型',
                dataIndex: 'type',
                render:(text, record, index) => {
                    return text===0 ? '菜单': '权限'
                }
            },
            {
                title: '层级',
                dataIndex: 'level'
            },
            {
                title: '排序',
                dataIndex: 'seq'
            },
            {
                title: '父级',
                dataIndex: 'pid'
            }
        ]
        return (
            <div>
                <Card>
                    <BaseFilterForm formList={this.formList} filterSubmit={ this.filterSubmit } />
                </Card>

                <Card style={{marginTop:10}}>
                    <Button type="danger" icon="delete" onClick={()=>this.handleOperator('delete')}>删除</Button>
                    <Button icon="plus" onClick={ ()=>this.handleOperator('create') }>增加</Button>
                    <Button icon="edit" onClick={()=>this.handleOperator('edit')}>编辑</Button>
                </Card>

                <Table className="content-wrap"
                       bordered
                       rowSelection={rowCheckSelection}
                       columns={columns}
                       dataSource={this.state.dataSource}
                       pagination={this.state.pagination}
                />

                <Modal
                    title={ this.state.title }
                    visible={ this.state.isVisible }
                    onOk={ this.handleSubmit }
                    okText="确定"
                    width={ 600 }
                    onCancel={ () =>{
                        this.menuForm.props.form.resetFields()
                        this.setState({
                            isVisible:false,
                            menuInfo:''
                        })
                    }}
                    cancelText="取消"
                >
                    <MenuForm menuInfo ={ this.state.menuInfo } type={ this.state.type } wrappedComponentRef={(inst) => this.menuForm = inst }/>
                </Modal>
            </div>
        )
    }
}
class MenuForm extends React.Component{

    render(){
        const { getFieldDecorator } =this.props.form
        const menuInfo = this.props.menuInfo || {}
        const type = this.props.type
        const formItemLayout = {
            labelCol: {span: 5},
            wrapperCol: {span: 15}
        };
        return (
            <Form layout="horizontal">
                <Form.Item label="菜单名" {...formItemLayout}>
                    {
                        menuInfo && type ==='detail' ? menuInfo.name:
                            getFieldDecorator('name',{
                                initialValue:menuInfo.name,
                                rules:[
                                    {
                                        required:true,
                                        message:'菜单名不能为空!'
                                    }
                                ]
                            })(
                                <Input placeholder="请输入菜单" type="text"/>
                            )
                    }
                </Form.Item>
                <Form.Item label="类型" {...formItemLayout}>
                    {
                        menuInfo && type ==='detail' ? menuInfo.type:
                            getFieldDecorator('type',{
                                initialValue:menuInfo.type,
                                rules:[
                                    {
                                        required:true,
                                        message:'菜单名不能为空!'
                                    }
                                ]
                            })(
                                <Input placeholder="请输入菜单" type="text"/>
                            )
                    }
                </Form.Item>
                <Form.Item label="层级" {...formItemLayout}>
                    {
                        menuInfo && type ==='detail' ? menuInfo.level:
                            getFieldDecorator('level',{
                                initialValue:menuInfo.level,
                                rules:[
                                    {
                                        required:true,
                                        message:'层级不能为空'
                                    },
                                    {
                                        pattern:/^\d$/,
                                        message:'请填入数字,位数为一位'
                                    }
                                ]
                            })(
                                <Input placeholder="请输入" type="text"/>
                            )
                    }
                </Form.Item>
                <Form.Item label="排序" {...formItemLayout}>
                    {
                        menuInfo && type ==='detail' ? menuInfo.seq:
                            getFieldDecorator('seq',{
                                initialValue:menuInfo.seq,
                                rules:[
                                    {
                                        required:true,
                                        message:'排序不能为空!'
                                    },
                                    {
                                        pattern:/^[0-9]{1,3}$/,
                                        message:'请输入数字，位数一位到三位'
                                    }
                                ]
                            })(
                                <Input placeholder="请输入" type="text"/>
                            )
                    }
                </Form.Item>
                <Form.Item label="父级" {...formItemLayout}>
                    {
                        menuInfo && type ==='detail' ? menuInfo.pid:
                            getFieldDecorator('pid',{
                                initialValue:menuInfo.pid,
                                rules:[

                                ]
                            })(
                                <Input placeholder="请输入菜单" type="text"/>
                            )
                    }
                </Form.Item>
            </Form>
        )
    }
}
MenuForm = Form.create({})(MenuForm)